<template>
	<AdminLayout activeKey="users" :breadcrumbs="['首页','用户管理','用户详情']" tabTitle="用户管理" currentPage="users-detail">
		<view class="page">
			<!-- 页面头部 -->
			<view class="page-header">
				<view class="header-info">
					<text class="page-title">用户详情</text>
					<text class="page-subtitle">查看用户完整信息档案</text>
				</view>
				<view class="header-actions">
					<button class="btn-secondary" @click="goBack">
						<text class="btn-icon iconfont icon-fanhui"></text>
						返回列表
					</button>
					<button class="btn-primary" @click="editUser">
						<text class="btn-icon iconfont icon-edit"></text>
						编辑用户
					</button>
				</view>
			</view>

			<!-- 用户基本信息卡片 -->
			<view class="info-card main-card">
				<view class="user-header">
					<view class="user-avatar-large">
						<text class="avatar-text-large">{{ getAvatarText(userInfo.username) }}</text>
					</view>
					<view class="user-main-info">
						<view class="username-row">
							<text class="username-large">{{ userInfo.username }}</text>
							<view :class="['role-tag-large', isAdmin ? 'role-admin' : 'role-user']">
								{{ isAdmin ? '管理员' : '普通用户' }}
							</view>
						</view>
						<text class="nickname-large">{{ userInfo.nickname || '未设置昵称' }}</text>
						<view class="status-row">
							<view :class="['status-badge', userInfo.status === 0 ? 'status-active' : 'status-inactive']">
								<view class="status-dot"></view>
								<text>{{ userInfo.status === 0 ? '正常' : '禁用' }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 统计卡片 -->
			<view class="stats-row">
				<view class="stat-card">
					<text class="stat-icon iconfont icon-renwu"></text>
					<text class="stat-number">{{ stats.taskCount }}</text>
					<text class="stat-label">发布任务</text>
				</view>
				<view class="stat-card">
					<text class="stat-icon iconfont icon-quanzi"></text>
					<text class="stat-number">{{ stats.postCount }}</text>
					<text class="stat-label">发帖数</text>
				</view>
				<view class="stat-card">
					<text class="stat-icon iconfont icon-huodong"></text>
					<text class="stat-number">{{ stats.activityCount }}</text>
					<text class="stat-label">参与活动</text>
				</view>
				<view class="stat-card">
					<text class="stat-icon iconfont icon-jifen"></text>
					<text class="stat-number">{{ stats.points }}</text>
					<text class="stat-label">积分余额</text>
				</view>
			</view>

			<!-- 详细信息区域 -->
			<view class="info-grid">
				<!-- 基本资料 -->
				<view class="info-card">
					<view class="card-header">
						<text class="card-title">
							<text class="iconfont icon-yonghu"></text>
							基本资料
						</text>
					</view>
					<view class="card-body">
						<view class="info-item">
							<text class="info-label">用户ID</text>
							<text class="info-value">{{ userInfo._id || '-' }}</text>
						</view>
						<view class="info-item">
							<text class="info-label">用户名</text>
							<text class="info-value">{{ userInfo.username || '-' }}</text>
						</view>
						<view class="info-item">
							<text class="info-label">昵称</text>
							<text class="info-value">{{ userInfo.nickname || '-' }}</text>
						</view>
						<view class="info-item">
							<text class="info-label">邮箱</text>
							<text class="info-value">{{ userInfo.email || '-' }}</text>
						</view>
						<view class="info-item">
							<text class="info-label">手机号</text>
							<text class="info-value">{{ userInfo.mobile || '-' }}</text>
						</view>
					</view>
				</view>

				<!-- 账户信息 -->
				<view class="info-card">
					<view class="card-header">
						<text class="card-title">
							<text class="iconfont icon-zhanghao"></text>
							账户信息
						</text>
					</view>
					<view class="card-body">
						<view class="info-item">
							<text class="info-label">账户状态</text>
							<view :class="['status-badge-small', userInfo.status === 0 ? 'status-active' : 'status-inactive']">
								<view class="status-dot-small"></view>
								<text>{{ userInfo.status === 0 ? '正常' : '禁用' }}</text>
							</view>
						</view>
						<view class="info-item">
							<text class="info-label">创建时间</text>
							<text class="info-value">{{ formatDate(userInfo.create_date) }}</text>
						</view>
						<view class="info-item">
							<text class="info-label">最后登录</text>
							<text class="info-value">{{ formatDate(userInfo.last_login_date) }}</text>
						</view>
						<view class="info-item">
							<text class="info-label">登录IP</text>
							<text class="info-value">{{ userInfo.last_login_ip || '-' }}</text>
						</view>
						<view class="info-item">
							<text class="info-label">违规次数</text>
							<text class="info-value" :style="{ color: userInfo.violation_count > 0 ? '#dc2626' : '#16a34a' }">
								{{ userInfo.violation_count || 0 }}次
							</text>
						</view>
					</view>
				</view>

				<!-- 任务统计 -->
				<view class="info-card">
					<view class="card-header">
						<text class="card-title">
							<text class="iconfont icon-renwu"></text>
							任务统计
						</text>
					</view>
					<view class="card-body">
						<view class="info-item">
							<text class="info-label">发布任务</text>
							<text class="info-value">{{ stats.taskPublished || 0 }}</text>
						</view>
						<view class="info-item">
							<text class="info-label">领取任务</text>
							<text class="info-value">{{ stats.taskReceived || 0 }}</text>
						</view>
						<view class="info-item">
							<text class="info-label">进行中</text>
							<text class="info-value">{{ stats.taskProcessing || 0 }}</text>
						</view>
						<view class="info-item">
							<text class="info-label">已完成</text>
							<text class="info-value">{{ stats.taskCompleted || 0 }}</text>
						</view>
					</view>
				</view>

				<!-- 圈子贡献 -->
				<view class="info-card">
					<view class="card-header">
						<text class="card-title">
							<text class="iconfont icon-quanzi"></text>
							圈子贡献
						</text>
					</view>
					<view class="card-body">
						<view class="info-item">
							<text class="info-label">发帖数</text>
							<text class="info-value">{{ stats.postsPublished || 0 }}</text>
						</view>
						<view class="info-item">
							<text class="info-label">评论数</text>
							<text class="info-value">{{ stats.commentsPublished || 0 }}</text>
						</view>
						<view class="info-item">
							<text class="info-label">获赞数</text>
							<text class="info-value">{{ stats.likesReceived || 0 }}</text>
						</view>
						<view class="info-item">
							<text class="info-label">我的点赞</text>
							<text class="info-value">{{ stats.myLikes || 0 }}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 违规记录 -->
			<view class="info-card" v-if="userInfo.violation_records && userInfo.violation_records.length > 0">
				<view class="card-header">
					<text class="card-title">
						<text class="iconfont icon-weiguichuli"></text>
						违规记录 ({{ userInfo.violation_records.length }})
					</text>
					<button class="btn-link" @click="viewAllViolations">查看全部</button>
				</view>
				<view class="card-body">
					<view class="violation-list">
						<view class="violation-item" v-for="(record, index) in userInfo.violation_records.slice(0, 3)" :key="index">
							<view class="violation-header">
								<text class="violation-type">{{ record.type }}</text>
								<text class="violation-time">{{ formatDate(record.mark_time) }}</text>
							</view>
							<view class="violation-reason" v-if="record.reason">{{ record.reason }}</view>
							<view class="violation-footer">
								<text class="violation-marker">标记人: {{ record.marker }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 操作日志 -->
			<view class="info-card">
				<view class="card-header">
					<text class="card-title">
						<text class="iconfont icon-rizhi"></text>
						最近操作
					</text>
				</view>
				<view class="card-body">
					<view class="log-list">
						<view class="log-item">
							<view class="log-dot"></view>
							<view class="log-content">
								<text class="log-text">用户登录系统</text>
								<text class="log-time">{{ formatDate(userInfo.last_login_date) }}</text>
							</view>
						</view>
						<view class="log-item">
							<view class="log-dot"></view>
							<view class="log-content">
								<text class="log-text">账户创建成功</text>
								<text class="log-time">{{ formatDate(userInfo.create_date) }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</AdminLayout>
</template>

<script>
import AdminLayout from '@/components/AdminLayout.vue'

export default {
	components: { AdminLayout },
	data() {
		return {
			userId: '',
			userInfo: {},
			stats: {
				taskCount: 0,
				postCount: 0,
				activityCount: 0,
				points: 0,
				taskPublished: 0,
				taskReceived: 0,
				taskProcessing: 0,
				taskCompleted: 0,
				postsPublished: 0,
				commentsPublished: 0,
				likesReceived: 0,
				myLikes: 0
			},
			loading: false
		}
	},
	computed: {
		isAdmin() {
			return this.userInfo.role && Array.isArray(this.userInfo.role) && this.userInfo.role.includes('admin')
		}
	},
	onLoad(options) {
		if (options.userId) {
			this.userId = options.userId
			this.loadUserDetail()
			this.loadUserStats()
		} else {
			uni.showToast({ title: '缺少用户ID参数', icon: 'none' })
			setTimeout(() => {
				this.goBack()
			}, 1500)
		}
	},
	methods: {
		async loadUserDetail() {
			this.loading = true
			try {
				const res = await uniCloud.callFunction({
					name: 'initAdmin',
					data: {
						action: 'getUserDetail',
						userId: this.userId
					}
				})
				
				if (res.result && res.result.code === 0) {
					this.userInfo = res.result.data || {}
				} else {
					uni.showToast({ title: res.result?.msg || '获取用户信息失败', icon: 'none' })
				}
			} catch (e) {
				console.error('获取用户详情失败:', e)
				uni.showToast({ title: '获取用户信息失败', icon: 'none' })
			} finally {
				this.loading = false
			}
		},
		
		async loadUserStats() {
			try {
				const res = await uniCloud.callFunction({
					name: 'initAdmin',
					data: {
						action: 'getUserStats',
						userId: this.userId
					}
				})
				
				if (res.result && res.result.code === 0) {
					this.stats = { ...this.stats, ...res.result.data }
				}
			} catch (e) {
				console.error('获取用户统计失败:', e)
			}
		},
		
		goBack() {
			uni.navigateBack()
		},
		
		editUser() {
			uni.navigateTo({
				url: `/pages/admin/users/index?edit=${this.userId}`
			})
		},
		
		viewAllViolations() {
			uni.navigateTo({
				url: `/pages/admin/users/violations?userId=${this.userId}`
			})
		},
		
		formatDate(timestamp) {
			if (!timestamp) return '-'
			const date = new Date(timestamp)
			return date.toLocaleString('zh-CN')
		},
		
		getAvatarText(username) {
			if (!username) return '?'
			if (/[\u4e00-\u9fa5]/.test(username)) {
				return username.charAt(0)
			}
			return username.substring(0, 2).toUpperCase()
		}
	}
}
</script>

<style scoped>
.page {
	padding: 32rpx;
	background: #f8fafc;
	min-height: 100vh;
}

.page-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 32rpx;
}

.header-info .page-title {
	font-size: 48rpx;
	font-weight: 700;
	color: #1a202c;
	display: block;
	margin-bottom: 8rpx;
}

.header-info .page-subtitle {
	font-size: 28rpx;
	color: #718096;
	display: block;
}

.header-actions {
	display: flex;
	gap: 16rpx;
}

.btn-secondary {
	display: flex;
	align-items: center;
	gap: 8rpx;
	background: #fff;
	color: #64748b;
	border: 2rpx solid #cbd5e1;
	border-radius: 12rpx;
	padding: 20rpx 32rpx;
	font-size: 28rpx;
	transition: all 0.2s ease;
}

.btn-secondary:hover {
	background: #f1f5f9;
	transform: translateY(-1rpx);
}

.btn-primary {
	display: flex;
	align-items: center;
	gap: 8rpx;
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
	color: #fff;
	border: none;
	border-radius: 12rpx;
	padding: 20rpx 32rpx;
	font-size: 28rpx;
	box-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.3);
	transition: all 0.2s ease;
}

.btn-primary:hover {
	background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
	transform: translateY(-1rpx);
}

.btn-icon.iconfont {
	font-size: 28rpx;
}

.info-card {
	background: #fff;
	border-radius: 20rpx;
	padding: 32rpx;
	box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
	border: 2rpx solid #f1f5f9;
	margin-bottom: 24rpx;
}

.main-card {
	margin-bottom: 32rpx;
}

.user-header {
	display: flex;
	gap: 32rpx;
	align-items: center;
}

.user-avatar-large {
	width: 160rpx;
	height: 160rpx;
	border-radius: 50%;
	background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8rpx 24rpx rgba(59, 130, 246, 0.4);
}

.avatar-text-large {
	font-size: 64rpx;
	font-weight: 700;
	color: #fff;
}

.user-main-info {
	flex: 1;
}

.username-row {
	display: flex;
	align-items: center;
	gap: 16rpx;
	margin-bottom: 12rpx;
}

.username-large {
	font-size: 48rpx;
	font-weight: 700;
	color: #1a202c;
}

.role-tag-large {
	padding: 12rpx 24rpx;
	border-radius: 16rpx;
	font-size: 24rpx;
	font-weight: 600;
}

.role-admin {
	background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
	color: #2563eb;
	border: 2rpx solid #93c5fd;
}

.role-user {
	background: #f8fafc;
	color: #64748b;
	border: 2rpx solid #cbd5e1;
}

.nickname-large {
	font-size: 28rpx;
	color: #64748b;
	display: block;
	margin-bottom: 16rpx;
}

.status-row {
	display: flex;
	gap: 16rpx;
}

.status-badge {
	display: flex;
	align-items: center;
	gap: 12rpx;
	padding: 12rpx 20rpx;
	border-radius: 12rpx;
	font-size: 24rpx;
	font-weight: 600;
}

.status-active {
	background: #f0fdf4;
	color: #16a34a;
	border: 2rpx solid #bbf7d0;
}

.status-inactive {
	background: #fef2f2;
	color: #dc2626;
	border: 2rpx solid #fecaca;
}

.status-dot {
	width: 16rpx;
	height: 16rpx;
	border-radius: 50%;
}

.status-active .status-dot {
	background: #16a34a;
}

.status-inactive .status-dot {
	background: #dc2626;
}

.stats-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24rpx;
	margin-bottom: 32rpx;
}

.stat-card {
	background: #fff;
	border-radius: 20rpx;
	padding: 32rpx;
	text-align: center;
	box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
	border: 2rpx solid #f1f5f9;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12rpx;
	transition: all 0.3s ease;
}

.stat-card:hover {
	transform: translateY(-4rpx);
	box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.1);
}

.stat-icon {
	font-size: 48rpx;
	color: #3b82f6;
}

.stat-number {
	font-size: 48rpx;
	font-weight: 700;
	color: #1a202c;
}

.stat-label {
	font-size: 24rpx;
	color: #64748b;
}

.info-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24rpx;
	margin-bottom: 24rpx;
}

.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 24rpx;
	padding-bottom: 16rpx;
	border-bottom: 2rpx solid #f1f5f9;
}

.card-title {
	font-size: 32rpx;
	font-weight: 700;
	color: #1a202c;
	display: flex;
	align-items: center;
	gap: 12rpx;
}

.card-title .iconfont {
	font-size: 28rpx;
	color: #64748b;
}

.btn-link {
	background: none;
	border: none;
	color: #3b82f6;
	font-size: 26rpx;
	padding: 0;
}

.card-body {
	display: flex;
	flex-direction: column;
	gap: 16rpx;
}

.info-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12rpx 0;
	border-bottom: 1rpx solid #f8fafc;
}

.info-item:last-child {
	border-bottom: none;
}

.info-label {
	font-size: 26rpx;
	color: #64748b;
	font-weight: 500;
}

.info-value {
	font-size: 28rpx;
	color: #1a202c;
	font-weight: 600;
}

.status-badge-small {
	display: flex;
	align-items: center;
	gap: 8rpx;
	padding: 8rpx 16rpx;
	border-radius: 12rpx;
	font-size: 22rpx;
	font-weight: 600;
}

.status-dot-small {
	width: 12rpx;
	height: 12rpx;
	border-radius: 50%;
}

.status-active .status-dot-small {
	background: #16a34a;
}

.status-inactive .status-dot-small {
	background: #dc2626;
}

.violation-list {
	display: flex;
	flex-direction: column;
	gap: 16rpx;
}

.violation-item {
	background: #f8fafc;
	padding: 20rpx;
	border-radius: 12rpx;
	border: 2rpx solid #e2e8f0;
}

.violation-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12rpx;
}

.violation-type {
	font-size: 28rpx;
	font-weight: 600;
	color: #dc2626;
}

.violation-time {
	font-size: 22rpx;
	color: #64748b;
}

.violation-reason {
	font-size: 26rpx;
	color: #475569;
	margin-bottom: 12rpx;
	line-height: 1.6;
}

.violation-footer {
	display: flex;
	justify-content: flex-end;
}

.violation-marker {
	font-size: 22rpx;
	color: #94a3b8;
}

.log-list {
	display: flex;
	flex-direction: column;
	gap: 24rpx;
}

.log-item {
	display: flex;
	gap: 16rpx;
	align-items: flex-start;
}

.log-dot {
	width: 16rpx;
	height: 16rpx;
	border-radius: 50%;
	background: #3b82f6;
	margin-top: 8rpx;
	flex-shrink: 0;
}

.log-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8rpx;
}

.log-text {
	font-size: 28rpx;
	color: #1a202c;
	font-weight: 500;
}

.log-time {
	font-size: 22rpx;
	color: #94a3b8;
}

@media (max-width: 900px) {
	.stats-row {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.info-grid {
		grid-template-columns: 1fr;
	}
	
	.user-header {
		flex-direction: column;
		text-align: center;
	}
}
</style>

